<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<h1>空气净化器</h1>
			<h2>{{pm25}}</h2>
			<img v-if="pm25<100" src="../img/1.png">
			<img v-else-if="pm25<200" src="../img/2.png">
			<img v-else-if="pm25<300" src="../img/3.png">
			<img v-else src="../img/4.png">
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						pm25: 180,
					}
				},
				created() {
					setInterval(() => {
						let pm25 = Math.random() * 400;
						this.pm25 = Math.round(pm25);
					}, 2000);
				},
			}).mount("#app");
		</script>
	</body>

</html>